<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        #d1 {
            border: 1px solid red;
            width: 500px;
            height: 300px;
            margin: auto;
        }
        #div1, #div2, #div3, #div4, #div5 {
            width: 500px;
            display: none;
            border-bottom: 1px solid red;
        }
        #menu_index {
            height: 50px;
        }
        #menu_index li {
            width: 98px;
            height: 50px;
            border: 1px solid red;
            text-align: center;
            line-height: 50px;
            list-style-type: none;
            float: left;
            background-color: white;
        }

    </style>
</head>
<body>
<div id="d1">
    <ul id="menu_index">
        <li class="menu_index_li"  data-value="div1">国际新闻</li>
        <li class="menu_index_li"  data-value="div2">国内新闻</li>
        <li class="menu_index_li"  data-value="div3">体育新闻</li>
        <li class="menu_index_li"  data-value="div4">娱乐新闻</li>
        <li class="menu_index_li"  data-value="div5">特别新闻</li>
    </ul>
    <div id="div1" class="new_content">
        国际新闻<br/>
        奥巴马又踹门了<br/>
        普京度假骑熊<br/>
    </div>
    <div id="div2" class="new_content">
        国内新闻<br/>
        马云又开了一家公司。<br/>
        华为中国企业的脊梁。<br/>
    </div>
    <div id="div3" class="new_content">
        体育新闻<br/>
        刘翔又获得了金牌。<br/>
        九球天后退役嫁人了。<br/>
    </div>
    <div id="div4" class="new_content">
        娱乐新闻<br/>
        王宝强天下无贼。<br/>
        孙怡获封影后。<br/>
    </div>
    <div id="div5" class="new_content">
        特别新闻<br/>
        甘肃获得全国表扬。<br/>
    </div>
</div>
<script>

    var person = {
        id : 1,
        name : "胡敏会",
        age : 20
    };

    // console.log(person);
    // delete person.id;
    // person.id = undefined;
    // console.log(person);
    // console.log(person.id);

    // person = undefined;
    console.log(person);
    person.hobby = 'busket';
    console.log(person);

    //绑定事件
    document.getElementById('menu_index').addEventListener('mouseover', tabShow);

    init();

    function init() {
        var divArr = ['div1', 'div2', 'div3', 'div4', 'div5'];

        var divId = document.getElementsByClassName('menu_index_li')[0].getAttribute('data-value');
        document.getElementById(divId).style.display = "block";
        document.getElementsByClassName('menu_index_li')[0].style.backgroundColor = "aqua";
    }

    function tabShow() {
        var tar = event.target;
        var targetName = tar.nodeName.toLowerCase();
        var allLi = document.getElementsByClassName('menu_index_li');
        var allDiv = document.getElementsByClassName('new_content');
        var selectedColor = "aqua";
        var unselectedColor = "";

        if(targetName == 'li') {
            //取消所有导航栏的选中颜色
            for (var i = 0; i < allLi.length; i++ ) {
                allLi[i].style.backgroundColor = unselectedColor;
            }

            //将所有div隐藏
            for (var i = 0; i < allDiv.length; i++ ) {
                allDiv[i].style.display = "none";
            }

            //设置li选中颜色
            tar.style.backgroundColor = selectedColor;
            //设置当前li所对应的div显示
            document.getElementById(tar.getAttribute('data-value')).style.display = "block";
        }
    }


    //获取css属性的方法
    function getStyle(obj, name){
        if(obj.currentStyle){
            return obj.currentStyle[name];
        }else{
            return getComputedStyle(obj, null)[name];
        }
    }

    function getFullStyle(obj){
        if(obj.currentStyle){
            return obj.currentStyle;
        }else{
            return getComputedStyle(obj, null);
        }
    }


</script>
</body>
</html>